<template>
  <fullScreenContainer :leftList="menuList" :rightList="rightList" title="湖南省农业优势特色产业集群信息系统" type="fullScreenContainer">
    <template slot="leftContent">
      <Panel key="jdfj" v-model="tabs_value" :tabs="tabs" @change="change" height="100%">
        <div class="jdfj-total">
          <div class="text">繁育基地</div>
          <div class="number">{{ zyfyjd }}</div>
          <div class="unit">家</div>
        </div>
        <div class="jdfj-tabs1">
          <tabs1 v-model="tabs1_value" :tabs="[{ name: '按产业分析', value: '1' }]"></tabs1>
        </div>
        <div class="jdfj-box">
          <div class="jdfj-left-box" v-for="item in cyfx">
            <img :src="home" alt="" srcset="" />
            <div class="jdfj-right-box-1">
              <div class="right-top" style="justify-content: center;">
                <span class="number">{{ item.number }}</span>
                <span class="text">家</span>
              </div>
              <div class="right-bottom" style="text-align: center;">
                {{ item.name }}
              </div>
            </div>
          </div>
        </div>
        <div class="jdfj-tabs1">
          <tabs1 v-model="tabs1_value" :tabs="[{ name: '按企业区域分析', value: '1' }]"></tabs1>
        </div>

        <div class="jdfj-bar">
          <echartsDemo key="top" :initData="qyqyfx" :initChart="topChart"></echartsDemo>
        </div>

        <div class="jdfj-tabs1">
          <tabs1 v-model="tabs1_value" :tabs="[{ name: '按企业类型分析', value: '1' }]"></tabs1>
        </div>

        <div class="jdfj-bar1">
          <echartsDemo key="top1" :initData="qylx" :initChart="barChart"></echartsDemo>
        </div>
      </Panel>
    </template>
    <template slot="rightContent">
      <Panel height="100%" v-model="panel_value" :tabs="[{ name: '种业企业', value: '1' }]">
        <div class="left-form">
          <el-input v-model="form.company" placeholder="请输入企业名称"></el-input>
          <div style="display: flex; gap: 8px;">
            <div class="left-form-text">区域</div>
            <el-select style="width: 83.5px;" v-model="form.sq" placeholder="市">
              <!-- <el-option value="1" label="测试"></el-option> -->
            </el-select>
            <el-select style="width: 83.5px;" v-model="form.xq" placeholder="县">
              <!-- <el-option value="1" label="测试"></el-option> -->
            </el-select>
          </div>
        </div>
        <div class="left-list">
          <div class="left-item" v-for="item in companyList">
            <div class="item-title">
              <span>
                {{ item.companyName }}
              </span>
            </div>
            <div class="item-ctx">
              <div class="item-1" style="gap: 6px; align-items: center;">
                <div>
                  <span class="a">法人：</span>
                  <span class="a">{{ item.legalName }}</span>
                </div>
                <div class="line"></div>
                <div>
                  <span class="a">注册资本：</span>
                  <span class="a">{{ item.registerFunds }}万元</span>
                </div>
                <div class="line"></div>
                <div>
                  <span class="a">注册时间：</span>
                  <span class="a">{{ parseTime(item.registerTime,'{y}-{m}-{d}') }}</span>
                </div>
              </div>
              <div class="item-1">
                <span class="a">地址：</span>
                <div class="item-1-right">
                  <span class="a">{{ item.address }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </Panel>
    </template>
    <template slot="fullScreenMap">
      <div class="map-page-container">
        <Map ref="Map"></Map>
      </div>
    </template>
    <template slot="centerContent">
      <map-tools @iconChange="iconChange"></map-tools>
    </template>
  </fullScreenContainer>
</template>
<script>
import Map from '@/Iframe/kcgis3x.vue'
import MapTools from '@/layout/components/Center/index.vue'
import EchartsDemo from '@/echartsDemo/index.vue'
import menuList, { rightList } from './menu'
import home from './box1.png'
import echartsDemo from '@/echartsDemo/index.vue'
import tabs1 from '../templateBigScreen/tabs1.vue'
import tabs2 from '../templateBigScreen/tabs2.vue'
import pieChart from '../templateBigScreen/pieChart'
import topChart from '../templateBigScreen/topChart'
import barChart from './barChart'
import box2 from '../templateBigScreen/box2.vue'
import box3 from '../templateBigScreen/box3.vue'
import cselect from './Select/index.vue'
import scroll from '../templateBigScreen/scroll.vue'
import {parseTime} from '@/utils/ruoyi'
import { getChartData, ztyztqk, getCompanyList } from "@/apis/bigOneIndex";
export default {
  components: {
    Map,
    MapTools,
    tabs1,
    echartsDemo,
    box2,
    box3,
    tabs2,
    cselect,
    scroll,
  },

  data() {
    return {
      menuList,
      rightList,
      parseTime,
      home,
      pieChart,
      barChart,
      topChart,
      tabs1_value: '1',
      select1_value: 2,
      tabs2_value: '1',
      panel_value: '1',
      form: {
        company: '',
        sq: '',
        xq: '',
      },
      tabs: [
        {
          name: '种子繁育基地分析',
          value: '1',
        },
      ],
      tabs_value: '1',
      learDataColumnsConfg: [

        {
          label: '实验',
          prop: 'datetiem',
          width: '25%',
          paddingLeft: '0px',
        },
      ],
      rowdata: [


        {
          name: '2022级计算机1班',
          class: 'yy3',
          content: 'xx',
          datetiem: '76.76',
        },
      ],
      cyfx: [

      ],
      qyqyfx: [

      ],

      qylx: {},
      companyList: [],
      zyfyjd: 0,
    }
  },
  created() {
    this.getData();
  },
  methods: {
    change(value) {
      console.log(value, 'value')
    },
    text() { },
    iconChange(data) {
      debugger
      let layerTypeList = data.filter(item => {
        return item.checked;
      });
      let layerType = layerTypeList.map(item => item.value).join(",");
      this.getData(layerType);
    },
    getData(layerType) {
      this.getChartData1(layerType);
      this.getChartData2(layerType);
      this.getZtyztqk(layerType);
      this.getCompanyList(layerType);
      this.getChartData3(layerType);
    },
    getZtyztqk(layerType) {
      let params = { "layerType": layerType };
      ztyztqk(params).then(res => {
        //executeOorgname,zs
        this.zyfyjd = res.data.zyfyjd || 0;
      });
    },
    getChartData2(layerType) {
      let params = { "layerType": layerType, "chartName": "种业专题-按企业类型分析" };
      getChartData(params).then(res => {
        //executeOorgname,zs
        this.qylx = {};
        this.qylx = this.formatChartData(res.data);
      });
    },

    getChartData1(layerType) {
      let params = { "layerType": layerType, "chartName": "种业专题-按企业区域分析" };
      getChartData(params).then(res => {
        //executeOorgname,zs ，getCompanyList
        this.qyqyfx = [];
        res.data.forEach(e => {
          var data = { "executeOorgname": e.name, "zs": e.value }
          this.qyqyfx.push(data);
        });
      });
    },
    getChartData3(layerType) {
      let params = { "layerType": layerType, "chartName": "种业专题-按产业分析" };
      getChartData(params).then(res => {
        //executeOorgname,zs
        this.cyfx = [];
        res.data.forEach((e, index) => {
          var data = { "number": e.value, "unit": "家", "name": e.name };
          if (index < 4) {
            this.cyfx.push(data);
          }
        });
      });
    },
    getCompanyList(layerType) {
      let params = { "pageNum": 1, "pageSize": 10, "firstType": layerType };
      getCompanyList(params).then(res => {
        debugger
        this.companyList = res.rows;
      });
    },
    formatChartData(data) {
      let legendData = [];
      let seriesData = [];
      let result = {};
      data.forEach(e => {
        legendData.push(e.name);
        seriesData.push({ "name": e.name, "value": e.value });
      });
      result.legendData = legendData;
      result.xAxisData = legendData;
      result.seriesData = seriesData;
      return result;
    },
  },
  mounted() { },
}
</script>
<style scoped lang="scss">
.jdfj-box {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
}

.table1-box {
  width: 100%;
}

.jdfj-tabs1 {
  margin-top: 32px;
}

.jdfj-tabs2 {
  margin-top: 18px;

  span {
    font-family: Source Han Sans;
    font-size: 12px;
    font-weight: normal;
    line-height: normal;
    text-transform: uppercase;
    letter-spacing: 2px;

    font-variation-settings: 'opsz' auto;
    font-feature-settings: 'kern' on;
    /* 文字色 */
    color: #c2e5ff;
    cursor: pointer;
    z-index: 0;
  }
}

.jdfj-left-box {
  // width: 83px;
  height: 145px;
  border-radius: 5px;
  opacity: 1;

  /* 自动布局 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  background: linear-gradient(180deg,
      rgba(59, 214, 172, 0.1) 0%,
      rgba(59, 214, 172, 0) 100%);

  z-index: 0;

  .jdfj-right-box-1 {
    .right-top {
      margin-top: 26px;
      opacity: 1;
      /* 自动布局 */
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 5px;
      z-index: 0;

      .number {
        font-family: DIN;
        font-size: 24px;
        font-weight: bold;
        line-height: 24px;
        letter-spacing: 0em;

        font-variation-settings: 'opsz' auto;
        background: linear-gradient(180deg, #d5fff5 15%, #8cd9c5 84%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        text-fill-color: transparent;
        z-index: 0;
      }

      .text {
        opacity: 0.8;
        font-family: 思源黑体;
        font-size: 14px;
        font-weight: 350;
        line-height: 14px;
        letter-spacing: 0em;

        /* 纯白 */
        color: #ffffff;

        z-index: 1;
      }
    }

    .right-bottom {
      height: 21px;
      opacity: 1;

      font-family: 思源黑体;
      font-size: 14px;
      font-weight: normal;
      line-height: normal;
      text-transform: uppercase;
      letter-spacing: 1px;

      font-variation-settings: 'opsz' auto;
      font-feature-settings: 'kern' on;
      /* 文字白 */
      color: #ffffff;

      z-index: 1;
      margin-top: 10px;
    }
  }
}

// .jdfj-tz {
//   margin-top: 32px;
// }
// .jdfj-tb {
//   width: 100%;
//   height: 300px;
//   margin-top: 16px;
// }

.flex1 {
  margin-top: 20px;
}

.jdfj-total {
  display: flex;
  gap: 24px;
  align-items: center;
  justify-content: center;
  margin-top: 18px;

  .text {
    /* 文字小 */
    font-family: Microsoft YaHei;
    font-size: 16px;
    font-weight: normal;
    line-height: 24px;
    letter-spacing: 0em;

    /* 文字色 */
    color: #d0fff2;

    z-index: 1;
  }

  .number {
    /* 数字1 */
    font-family: DIN;
    font-size: 36px;
    font-weight: bold;
    line-height: 36px;
    text-align: right;
    letter-spacing: 0px;

    background: linear-gradient(180deg, #d5fff5 15%, #8cd9c5 84%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    z-index: 2;
  }

  .unit {
    font-family: 思源黑体;
    font-size: 14px;
    font-weight: normal;
    line-height: 28px;
    letter-spacing: 0px;

    color: rgba(255, 255, 255, 0.6);

    z-index: 3;
  }
}

.jdfj-bar {
  margin-top: 18px;
  height: 266px;
  opacity: 1;

  /* 自动布局 */
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0px;
  flex-grow: 1;
  align-self: stretch;

  z-index: 2;
}

.jdfj-bar1 {
  margin-top: 18px;
  height: 236px;
}

.big-left-ctx {
  width: 480px;
  height: 966px;
  border-radius: 5px;
  opacity: 1;

  /* 自动布局 */
  display: flex;
  flex-direction: column;
  padding: 0px 16px;
  gap: 24px;

  /* 背景渐变1 */
  background: linear-gradient(180deg,
      rgba(17, 77, 71, 0.3) 0%,
      rgba(22, 53, 50, 0.3) 100%);

  z-index: 1;
}

.left-form {
  display: flex;
  gap: 24px;
  margin-top: 24px;
  align-items: center;

  .left-form-text {
    width: 32px;
    line-height: 32px;
    opacity: 1;
    font-family: Microsoft YaHei;
    font-size: 14px;
    font-weight: normal;
    letter-spacing: 0.56px;

    font-variation-settings: 'opsz' auto;
    /* 文字色 */
    color: #d0fff2;

    z-index: 1;
  }
}

.left-list {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;

  .left-item {
    width: 448px;
    height: 124px;
    opacity: 1;

    /* 自动布局 */
    display: flex;
    flex-direction: column;
    padding: 0px;
    align-self: stretch;

    z-index: 1;

    .item-title {
      width: 448px;
      height: 36px;
      opacity: 1;

      /* 自动布局 */
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      padding: 10px 16px;
      align-self: stretch;

      background: linear-gradient(270deg,
          rgba(59, 214, 172, 0.15) 2%,
          rgba(15, 179, 135, 0.15) 100%);

      z-index: 0;

      span {
        opacity: 1;

        font-family: 思源黑体;
        font-size: 16px;
        font-weight: bold;
        line-height: 16px;
        letter-spacing: 2px;

        background: linear-gradient(180deg, #d5fff5 15%, #8cd9c5 84%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        text-fill-color: transparent;
        z-index: 0;
      }
    }

    .item-ctx {
      padding: 16px;
      display: flex;
      flex-direction: column;
      gap: 16px;

      .item-1 {
        display: flex;

        span.a {
          /* 图表中文 */
          font-family: Source Han Sans CN;
          font-size: 14px;
          font-weight: 350;
          line-height: 20px;
          letter-spacing: 0em;

          /* 文字白 */
          color: #ffffff;

          z-index: 1;
        }

        .item-1-right {
          display: flex;
          gap: 8px;

          div {
            border-radius: 2px;
            opacity: 1;

            /* 自动布局 */
            display: flex;
            flex-direction: column;
            padding: 4px 8px;

            background: linear-gradient(0deg,
                rgba(255, 239, 9, 0.1) 0%,
                rgba(255, 245, 104, 0.1) 100%);

            z-index: 1;

            span {
              font-family: 思源黑体;
              font-size: 14px;
              font-weight: normal;
              line-height: 14px;
              letter-spacing: 0em;

              background: linear-gradient(0deg, #ffef09 0%, #fff568 100%);
              -webkit-background-clip: text;
              -webkit-text-fill-color: transparent;
              background-clip: text;
              text-fill-color: transparent;
              z-index: 0;
            }
          }
        }

        div.line {
          width: 18px;
          height: 0px;
          transform: rotate(90deg);
          opacity: 1;

          border-top: 1px solid rgba(255, 255, 255, 0.3);

          z-index: 1;
        }
      }
    }
  }
}
</style>
